import * as React from 'react'
import classNames from 'classnames'
import { Icon } from '../index'
import Item from './item'

import { TimelineProps, TimelineState } from './interface'

class Timeline extends React.Component<TimelineProps, TimelineState> {
  static Item: typeof Item
  static defaultProps = {
    prefixCls: 'layui-timeline'
  }

  constructor(props: TimelineProps) {
    super(props)
    this.state = {}
  }

  render() {
    const {
      prefixCls, className, data, children,
      ...restProps
    } = this.props
    const classes = classNames(prefixCls, className, {

    })

    return (
      <ul className={classes}>
        {children}
        {
          data && data.map((item, index) => {
            return (
              <li key={index} className="layui-timeline-item">
                {/* <i class="layui-icon layui-timeline-axis">&#xe63f;</i> */}
                <Icon className={`${prefixCls}-axis`}>&#xe63f;</Icon>
                <div className={`${prefixCls}-content layui-text`}>
                  <h3 className={`${prefixCls}-title`}>{item.title}</h3>
                  {item.content && item.content}
                </div>
              </li>
            )
          })
        }
      </ul>
    )
  }

}

export default Timeline